<template>
	<!-- v-show="isNavBar" -->
	<view class="nav-header">
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<view :style="{ height: statusBarHeight + 'px'}"></view>
			<!-- <view class="left" @click="onClickBack">
		        <text class="icon-icon-chevron-left" style="font-size: 50rpx;"></text>
		    </view>  :style="{ marginTop: statusBarHeight + 'px', height: navBarHeight + 'rpx'  }" -->
			<view class="title" :style="{ height: titleBarHeight + 'px', lineHeight: titleBarHeight + 'px'}">
				汇标检测技术中心
			</view>
		</view>
		<!-- 搜索  @input="onSearchInput"-->
		<view class="search-contariner">
			<input v-model="searchValue" placeholder="请输入检测名称" class="search-input" @confirm="onSearchConfirm" />
			<uni-icons type="search" size="20" color="#bbb" class="search-icon"></uni-icons>
			<view class="search-btn" @click="onChangePrint()">搜索</view>
		</view>
	</view>
</template>

<script>
	// 引入胶囊
	import {
		// getNavBarHeight,
		getStatusBarHeight,
		getTitleBarHeight
	} from "../utils/system";
	
	export default {
		// props:{
		// 	isNavBar:{
		// 		type:Boolean,
		// 		default:true,
		// 	}
		// },
		// watch: {
		// 	// 监听 `propData` 的变化
		// 	isNavBar(newisNavBarVal, oldisNavBarVal) {
		// 	  this.isNavBar = newisNavBarVal;
		// 	  console.log("新的newisNavBarVal",newisNavBarVal)
		// 	}
		// },
		data() {
			return {
				// navBarHeight: getNavBarHeight(),
				titleBarHeight: getTitleBarHeight(),
				statusBarHeight: getStatusBarHeight(),
				searchValue:"", // 搜索名称
				pages:"", // 跳转路径
				currentUrl:""
			}
		},
		mounted() {
			this.getCurrentUrl()
		},
		methods: {
			// onSearchInput(e){
			// 	console.log("监听搜索input",e)
			// },
			onSearchConfirm(e){
				// console.log("监听回车搜索input",e)
				if(this.currentUrl == "pagesClient/detection/analyze"){
					this.$emit('onSearchConfirm',e.detail.value)
				}else{
					this.pages = `/pagesClient/detection/analyze?method=weituo&projectName=${e.detail.value}`;
					this.$goto(this.pages)
				}
			},
			onChangePrint(){
				if(this.currentUrl == "pagesClient/detection/analyze"){
					this.$emit('onChangePrint',this.searchValue)
				}else{
					this.pages = `/pagesClient/detection/analyze?method=weituo&projectName=${this.searchValue}`;
					this.$goto(this.pages)
				}
				// console.log("点击搜索input",this.searchValue)
			},
			getCurrentUrl() {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				this.currentUrl = currentPage.route;
				// console.log('Current URL:', this.currentUrl);
			}
		}
	}
</script>

<style lang="scss">
	
	.nav-header{
		background-image: url("https://limsapi.gzhbcss.com/static/index_header_1.jpg");
		// background-image: url(../static/img/index_header_1.jpg);
		background-size: cover;
		background-position: center;
		// opacity: 1;
		// transition: all 0.3s; 
		// 导航栏
		.nav-bar{
			// background-color: #0081cc;
			.title{
				margin-left: 20rpx;
				font-size: 40rpx;
				color: #fff;
			}
		}
		
		// 搜索
		.search-contariner {
			display: flex;
			align-content: center;
			padding: 15rpx 20rpx;
			justify-content: space-between;
			// background-color: #0081cc1a;
			position: relative;
			.search-input {
				flex: 1;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 40rpx;
				background: #f1f1f1;
				padding-left: 70rpx;
				// font-size: 30rpx;
				font-size: 27rpx;
			}
		
			.search-icon {
				position: absolute;
				left: 40rpx;
				top: 52%;
				transform: translateY(-50%);
			}
		
			.search-btn {
				width: 90rpx;
				text-align: center;
				font-size: 30rpx;
				height: 70rpx;
				line-height: 70rpx;
				color: #fff;
			}
		}
	}
	// .active{
	// 	opacity: 0;
	// 	background-color: rgb(249,250,251);
	// }
</style>